<template>
	<!-- 订单列表页 -->
	<view >
		<view class="count" v-for="(item,idx) in 2" :key="idx" > 
			<!-- 卡片 -->
			<view class="card-style">
				<view class="first u-flex u-row-between">
					<view class="left">
						<text class="left-name">门票订单：</text>
						<text class="left-id">12839218391</text>
					</view>
					<text class="right u-flex">待付款</text>
				</view>
				<view class="second u-flex">
					<view class="left-img">					
						<u-image class="image" :src="src" width="150rpx" height="126rpx"></u-image>
					</view>
					<view class="right-con">
						<view>
							<text class="ticket">植物园大门成人票 x3</text>
						</view>
						<view>
							<text class="time">出行日期：2020-10-09</text>
						</view>
						<view>
							<text class="order">下单时间：2020-10-09 12:10:30</text>
						</view>					
					</view>
				</view>
				<view class="third u-flex u-row-between">
					<view class="left">
						<text>总计：</text>
						<text class="pirce">￥289</text>
					</view>
					<view class="right u-flex">
						<button>取消订单</button>
						<button class="green">立即支付</button>
					</view>
				</view>
			</view>
			<!-- 间隔 -->
			<!-- <view class="gap"></view> -->
		</view>		
		
		
	</view>
</template>

<script>	
	export default {
		data() {
			return {
				src:''
			}
		},
		
	};
</script>

<style lang="scss" scoped>
	.count{
		border-bottom: 20rpx solid #f8f8f8;
		&:last-child{
			border-bottom: 0;
		}
		/* 详情页 */
		.card-style{
			width: 100%;
			padding: 40rpx 30rpx 30rpx 30rpx;
			// background-color: #FAB6B6;
			// 第一行
			.first{
				width: 100%;
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				letter-spacing: 1.17rpx;
				margin-bottom: 23rpx;
				.left-name{
					color: #1E2221;
				}
				.left-id{
					color: #353535;
				}
				.right{
					color: #EE8D00;	
				}
			}	
			//第二行
			.second{
				height: 126rpx;
				margin-bottom: 30rpx;
				//图片
				.left-img{
					margin-right: 20rpx;
				}
				.right-con{
					.ticket{
						font-family: PingFangSC-Medium;
						font-size: 28rpx;
						color: #1E2221;
						letter-spacing: 1.17rpx;
						margin-bottom: 14rpx;
					}
					.time,.order{
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #838383;
						letter-spacing: 1rpx;
					}
					.time{
						margin-bottom: 6rpx;
					}
					
				}
			}
			// 第三行
			.third{
				height: 56rpx;
				.left{
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #F02015;
					letter-spacing: 1rpx;
					.pirce{
						font-family: PingFangSC-Medium;
						font-size: 32rpx;
						color: #F02015;
						letter-spacing: 1.34rpx;
						line-height: 33rpx;
						font-weight: 600;
					}
				}
				.right{
					button{
						width: 140rpx;
						height: 56rpx;
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #838383;
						letter-spacing: 1.09rpx;
						margin-left:20rpx ;
						background: #FFFFFF;
						border-radius: 8rpx;
						line-height: 56rpx;
					}
					uni-button{
						padding: 0;
					}
					.green{
						background: #178975;
						color: #fff;
					}
				}
			}		
	}
	}
</style>
